<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/red/h5/lib/reset.css">
  <link rel="stylesheet" href="/red/h5/lib/all.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"/>
  <style type="text/css">
    /*版权信息*/
    .public_copyright_container{
      
    }
    .public_copyright_content{
      position: relative;
      margin: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url(http://weidogstest.oss-cn-beijing.aliyuncs.com/0d118b616ad13e1f874e458c8310be76.png)no-repeat center center;
    }
    .public_copyright_content p{
      background: #fff;
      font-size: 13px;
      color: #999;
      line-height: 17px;
      text-align: center;
      padding: 0 5px;
    }
  </style>
</head>
<body>

<div id="app">
  <van-nav-bar title="红包模板({$count})" left-arrow></van-nav-bar>
  {loop $user as $userv}
      <div class="pd">
        <div class="title">红包金额: ￥{$userv->hbprice}</div>
        <div class="mt hb-row">
          <div class="hb">
            <h1>恭喜发财，大吉大利</h1>
            <h2>
              点我领红包 <img src="{$im_url}" width="50" height="50" alt="">
            </h2>
          </div>
          <van-button size="small" type="info" block onclick="check('{$userv->id}','{$userv->hbprice}')">发送</van-button>
        </div>
      </div>
  {/loop}
  <van-popup v-model="show" position="bottom">
    <div class="popup">
      <h1>发送红包</h1>
      <van-cell-group>
        <van-cell title="红包总金额" >￥!{!{prices}}</van-cell>
        <span v-if="a"> 
        <van-field
            v-model="value"
            label="红包个数"
            placeholder="填写个数"
            input-align="right"></van-field>
        </span>
        <van-field
            v-model="values"
            label="红包语"
            placeholder="请输入"
            input-align="right"></van-field>
      </van-cell-group>
      <span v-if="a">
      <van-radio-group v-model="radio">
        <van-cell-group title="红包类型" >
          <van-cell title="普通红包" clickable @click="radio = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="拼手气红包" clickable @click="radio = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      </span>
      <van-button size="small" type="info" block onclick="sendChatMessage()">发送</van-button>
      <van-button size="small" block onclick="shows()">取消</van-button>
    </div>
  </van-popup>
  <!-- 版权 -->
  <div class="public_copyright_container">
    <div class="public_copyright_content">
      <p>{$copyright}</p>
    </div>
  </div>


</div>

<script src="/red/h5/lib/vue.js"></script>
<script src="/red/lib/layui.js"></script>
<script src="/js/ajax.js"></script>
<script src="/red/h5/lib/moment.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            radio:'1',
            value:'',
            values:'',
            prices:'',
            id:'',
            is_quan:'',
            show:false,
            a:true,
        },
        methods:{
            afterRead:function(file){
                console.log(file)
            },
            onSearch:function(){

            },
            setUserTag:function(item){
                this.usertag = item;
                this.show = false;
            },
            setUser:function(item){
                this.user = item;
                this.showUser = false;
            },
        }
    });
    function shows(){
      app.$data.values = "";
      app.$data.show = false;
    }
    function check(id,price){
       wx.invoke('getContext', {
          }, function(res){
          if(res.err_msg == "getContext:ok"){
              if(res.entry == "single_chat_tools"){
                app.$data.a = false;
                app.$data.prices = price;
                app.$data.id = id;
                app.$data.show = true;
                app.$data.value = "1";
                app.$data.radio = "1";
                app.$data.is_quan = "1";
              }else if(res.entry == "group_chat_tools"){
                app.$data.a = true;
                app.$data.prices = price;
                app.$data.id = id;
                app.$data.show = true;
                app.$data.is_quan = "2";
              }
              // entry  = res.entry ; //返回进入H5页面的入口类型，目前有normal、 contact_profile、 single_chat_tools、 group_chat_tools
          }else {
              alert("调用错误");
              return false;
          }
      });

    }
</script>
    
    <script type="text/javascript">
        wx.config({
          beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: "{$wxConfig['appId']}", // 必填，企业微信的corpID
          timestamp: "{$wxConfig['timestamp']}", // 必填，生成签名的时间戳
          nonceStr: "{$wxConfig['nonceStr']}", // 必填，生成签名的随机串
          signature: "{$wxConfig['signature']}",// 必填，签名，见 附录-JS-SDK使用权限签名算法
          jsApiList: ['sendChatMessage','getContext'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
        });
        wx.ready(function(){
          console.log('config success');
          wx.agentConfig({
            corpid: "{$corp_id}", // 必填，企业微信的corpid，必须与当前登录的企业一致
            agentid: "{$agent_id}", // 必填，企业微信的应用id （e.g. 1000247）
            timestamp: "{$agentConfig['timestamp']}", // 必填，生成签名的时间戳
            nonceStr: "{$agentConfig['nonceStr']}", // 必填，生成签名的随机串
            signature: "{$agentConfig['signature']}",// 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ['selectExternalContact','sendChatMessage','getContext'], //必填
            success: function(res) {
              console.log('agentConfig success');
              wx.checkJsApi({
                jsApiList: ['sendChatMessage','getContext'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function(res) {
                  
                }
              });
            },
            fail: function(res) {
              if(res.errMsg.indexOf('function not exist') > -1){
                console.log('版本过低请升级')
              }
            }
          });
        });
        wx.error(function(res){
          console.log('error'+res);
        });

        function sendChatMessage(){
          var id = app.$data.id;
          var values = app.$data.values;
          var value = app.$data.value;
          var radio = app.$data.radio;
          var price = app.$data.prices;
          var is_quan = app.$data.is_quan;
          var user_id = '{$userId}';
          myAjaxPost(false, true, "send-{$corp_id}-{$agent_id}.html", { price:price,radio:radio,value:value,values:values,id:id,user_id:user_id,is_quan:is_quan}, function (resp) {
            if (resp.status == 'success') {
                wx.invoke('sendChatMessage', {
                  msgtype:"news", //消息类型，必填
                  news: {
                    link: resp.data.link_url, //H5消息页面url 必填
                    title: resp.data.link_title, //H5消息标题
                    desc: resp.data.link_desc, //H5消息摘要
                    imgUrl: resp.data.link_pic, //H5消息封面图片URL
                  }
                }, function(res) {
                  if (res.err_msg == 'sendChatMessage:ok') {
                    //成功
                  }
                })
              
            }else{
              tusi(resp.msg);
            }
          });
        }        
    </script>


</body>
</html>
  